<template>
  <div>
    <el-dialog
      modal-class="record-list-dialog"
      v-model="_isOpen"
      width="1200"
      :title="'根据商品添加'"
      align-center
      :show-close="true"
      :close-on-click-modal="false"
      :close-on-press-escape="false"
    >
      <template #header>
        <h4 class="f18"><i class="icon"></i>商品订单记录明细</h4>
      </template>
      <template #default>
        <p class="mb6" style="color: #3d3d3d">已发起采购的订单无法撤销，撤销后被撤销的合同订单蒋作废处理，请谨慎操作</p>
        <div class="table-wrap">
          <el-table ref="tableRef" class="jzt-table" :data="tableData" stripe style="width: 100%; height: 500px">
            <template #empty>
              <el-empty description="这里暂时什么都没有" />
            </template>
            <el-table-column prop="skuSpecification" show-overflow-tooltip label="订单编号" width="320">
              <template #default="scope">
                {{ scope.row.orderNo || "--" }}
              </template>
            </el-table-column>
            <el-table-column prop="skuSpecification" show-overflow-tooltip label="创建时间">
              <template #default="scope">
                {{ scope.row.orderTime || "--" }}
              </template>
            </el-table-column>
            <el-table-column prop="skuSpecification" show-overflow-tooltip label="订单状态" width="320">
              <template #default="scope">
                <!-- {{ "--" }} -->
                <el-tag v-if="scope.row.purchaseStatus === 1" type="warning">待采购</el-tag>
                <el-tag v-if="scope.row.purchaseStatus === 2" type="primary">部分采购</el-tag>
                <el-tag v-if="scope.row.purchaseStatus === 3" type="success">已完成</el-tag>
                <el-tag v-if="scope.row.purchaseStatus === 4" type="info">已撤销</el-tag>
                <!-- <span v-else>-</span> -->
              </template>
            </el-table-column>
            <el-table-column fixed="right" label="操作">
              <template #default="scope">
                <el-button
                  v-if="optionInfo.type === 2 && scope.row.purchaseStatus === 1"
                  type="primary"
                  link
                  @click="clickCancel(scope.row)"
                >
                  撤销核量单
                </el-button>
                <el-button v-if="scope.row.purchaseStatus === 4" type="danger" link @click="delSubmit(scope.row)">
                  删除
                </el-button>
              </template>
            </el-table-column>
          </el-table>
        </div>
      </template>
      <template #footer>
        <div class="dialog-footer">
          <div style="flex: auto">
            <el-button class="jzt-button" type="info" @click="cancelClick">取消</el-button>
            <el-button type="primary" @click="cancelClick"> 我知道了 </el-button>
          </div>
        </div>
      </template>
    </el-dialog>
    <!-- 撤销核量单 二次确认 -->
    <ActionSubmitDialog
      v-model:isOpen="_isOpenCancel"
      :message="cancelTitle"
      :submitBtnText="'确认撤销订单'"
      @submit="returnSubmitCancel"
    />
  </div>
</template>

<script setup>
import { ref, computed, watch, onMounted, nextTick } from "vue";
import { ElMessage } from "element-plus";
import {
  getFolder,
  _debounce //防抖，多次频繁触发时，只执行最后一次
} from "@/utils/index";
import { Search } from "@element-plus/icons-vue";
import useCodeArrStore from "@/store/modules/select";
import RemarkEditor from "@/components/RemarkEditor";
import ActionSubmitDialog from "@/components/ActionSubmitDialog";
import { cancelNuclearOrder, deleteNuclearOrder } from "@/apis/quantity";

const tableRef = ref();
const emit = defineEmits(["update:isOpen", "cancelSuccess", "delSuccess"]);
const props = defineProps({
  isOpen: {
    type: Boolean,
    default: false
  },
  optionInfo: {
    type: Object,
    default: () => {
      return {
        detail: [], //明细详情
        type: 1, //1-订单记录 2-撤销核量单
        nuclearId: ""
      };
    }
  }
});
const tableData = ref([]);
const _isOpenCancel = ref(false);
const currObj = ref({}); //当前操作的行数据obj
const cancelTitle = ref("您正在操作撤销（HTD202411271536）当前合同订单编号，撤销后，此订单将作废处理，请确认是否继续撤销！");

watch(
  () => props.optionInfo.detail,
  val => {
    console.log("传递过来的主材辅材明细", props.optionInfo);
    tableData.value = [...val];
  },
  { deep: true, immediate: false }
);

//确认删除
const delSubmit = row => {
  deleteNuclearOrder({ orderId: row.orderId, nuclearId: props.optionInfo.nuclearId }).then(res => {
    if (res.code === 200) {
      ElMessage({
        message: "订单删除成功",
        type: "success"
      });
      emit("delSuccess", props.optionInfo.nuclearId); //刷新记录单列表
    }
  });
};

//打开二次确认框-撤销核量单
const clickCancel = row => {
  currObj.value = row;
  cancelTitle.value = `您正在操作撤销（${row?.orderNo || "--"}）当前合同订单编号，撤销后，此订单将作废处理，请确认是否继续撤销！`;
  _isOpenCancel.value = true;
};

//关闭二次确认框
const closeCancel = () => {
  _isOpenCancel.value = false;
};

//确认撤销核量单
const returnSubmitCancel = () => {
  cancelNuclearOrder({ orderId: currObj.value.orderId, nuclearId: props.optionInfo.nuclearId }).then(res => {
    if (res.code === 200) {
      ElMessage({
        message: "撤销核量单成功",
        type: "success"
      });
      closeCancel();
      emit("cancelSuccess", props.optionInfo.nuclearId); //刷新记录单列表
    }
  });
};

const _isOpen = computed({
  get() {
    return props.isOpen;
  },
  set(value) {
    emit("update:isOpen", value);
  }
});

//关闭当前组件弹窗
const cancelClick = () => {
  _isOpen.value = false;
};

defineExpose({});
</script>

<style lang="scss">
.record-list-dialog {
  .el-dialog {
    padding-left: 0 !important;
    padding-right: 0 !important;
    padding-bottom: 0 !important;
    .el-dialog__header {
      border-bottom: 1px solid #e2e8f0;
      padding: 0 24px 20px 24px;
    }
    .el-dialog__body {
      padding: 20px;
      header {
        display: flex;
        justify-content: space-between;
        align-items: center;
        margin-bottom: 14px;
        h3 {
          font-size: 16px;
          font-weight: normal;
          color: #3d3d3d;
          span {
            color: #ff3333;
          }
        }
        .left {
          display: flex;
          align-items: center;
          .el-form-item {
            margin-bottom: 0;
          }
        }
      }
    }
    .el-dialog__footer {
      padding-top: 0;
    }
  }
  .dialog-footer {
    box-shadow: 0px -3px 10px 0px rgba(4, 24, 48, 0.1);
    margin: 0;
    padding: 20px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    display: flex;
    justify-content: space-between;
    .white-input {
      .el-input__wrapper {
        background-color: white !important;
      }
    }
    .left {
      display: flex;
      p {
        display: flex;
        align-items: center;
        span {
          width: 40px;
          display: inline-block;
          text-align: left;
          & > i.star {
            font-style: normal;
            color: #ff3333;
          }
        }
      }
    }
  }
}
</style>
<style lang="scss" scoped>
.icon {
  display: inline-block;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background-color: #409eff;
  margin: 0 10px 4px 0;
}
</style>
